<template>
  <a-table
    ref="table"
    size="middle"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="ipagination"
    :loading="loading"
    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
    class="j-table-force-nowrap"
    @change="handleTableChange">

    <template slot="htmlSlot" slot-scope="text">
      <div v-html="text"></div>
    </template>
    <template slot="imgSlot" slot-scope="text">
      <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
      <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
    </template>
    <template slot="fileSlot" slot-scope="text">
      <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
      <a-button
        v-else
        :ghost="true"
        type="primary"
        icon="download"
        size="small"
        @click="uploadFile(text)">
        下载
      </a-button>
    </template>

    <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

  </a-table>
</template>

<script>
  import { getAction } from '@api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  export default {
    name: 'StatementAccountDetailsSubTable',
    mixins: [JeecgListMixin],
    props: {
      record: {
        type: Object,
        default: null,
      }
    },
    data() {
      return {
        description: '对账单对应订单详情管理页面',
        disableMixinCreated: true,
        // 展开的行
        expandedRowKeys: [],
        loading: false,
        dataSource: [],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'客户信息',
            align:"center",
            dataIndex: 'customerId'
          },
          {
            title:'对账单ID',
            align:"center",
            dataIndex: 'statementAccountId'
          },
          {
            title:'对账单详情ID',
            align:"center",
            dataIndex: 'statementAccountDetailsId'
          },
          {
            title:'支付应收款项ID',
            align:"center",
            dataIndex: 'receivablesId'
          },
          {
            title:'订单支付时间',
            align:"center",
            dataIndex: 'tradeFinishTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'交易状态：0.成功',
            align:"center",
            dataIndex: 'tradeState'
          },
          {
            title:'订单类型：0缴费，1预存',
            align:"center",
            dataIndex: 'orderType'
          },
          {
            title:'订单支付方式',
            align:"center",
            dataIndex: 'tradeType'
          },
          {
            title:'支付订单号',
            align:"center",
            dataIndex: 'transactionId'
          },
          {
            title:'更新人',
            align:"center",
            dataIndex: 'updateBy'
          },
          {
            title:'更新日期',
            align:"center",
            dataIndex: 'updateTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'创建日期',
            align:"center",
            dataIndex: 'createTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remark'
          },
          {
            title:'所属公司ID',
            align:"center",
            dataIndex: 'companyId'
          },
          {
            title:'所属部门CODE',
            align:"center",
            dataIndex: 'sysOrgCode'
          },
          {
            title:'删除状态(0-正常,1-已删除)',
            align:"center",
            dataIndex: 'delFlag'
          },
          {
            title:'版本号',
            align:"center",
            dataIndex: 'versionFlag'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            // fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          listByMainId: '/zcgl/statementAccount/queryStatementAccountDetailsPage',
        },
      }
    },
    watch: {
      record: {
        immediate: true,
        handler() {
          if (this.record != null) {
            this.loadData(this.record)
          }
        }
      }
    },
    methods: {

      handleTableChange1 (pagination, filters, sorter) {
        this.ipagination = pagination
        this.loadData(this.record)
      },
      loadData(record) {
        this.loading = true
        this.dataSource = []
        getAction(this.url.listByMainId, {
          statementAccountId: record.id,
          pageNo: this.ipagination.current,
          pageSize: this.ipagination.pageSize
        }).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
        }).finally(() => {
          this.loading = false
        })
      },

    },
  }
</script>

<style scoped>

</style>
